import Vue from 'vue';
import Store from '@/views/cellular-area-config/Store';
import { LIST_NAME } from '@/views/cellular-area-config/constants';
import {
  HeaderForm,
  Table,
  ImportCellularModal,
  ImportCellularCompeteModal,
  CellularStoreModal,
  ModifyCellularInfoModal,
} from '@/views/cellular-area-config/components';
import { formatDate } from '@/utils/util';
import { TOP_CHANNELS } from '@/constants';

Vue.component(HeaderForm.name, HeaderForm);
Vue.component(Table.name, Table);
Vue.component(CellularStoreModal.name, CellularStoreModal);
Vue.component(ImportCellularModal.name, ImportCellularModal);
Vue.component(ImportCellularCompeteModal.name, ImportCellularCompeteModal);
Vue.component(ModifyCellularInfoModal.name, ModifyCellularInfoModal);

export default {
  metaInfo: {
    title: '蜂窝区域配置',
  },
  data() {
    return {
      store: new Store([{ listName: LIST_NAME }]),
      topChannelList: TOP_CHANNELS,
    };
  },
  methods: {
    handleCurrentChange() {},
    ...[
      'pageSizeChange',
      'pageNumChange',
      'queryCellularAreaConfiguration',
      'onClose',
      'onOpenImportModal',
      'onCloseImport',
      'onOpenImportCompeteModal',
      'onCloseImportCompete',
      'OnCloseExport',
      'exportCellularInfo',
      'resetTable',
      'openModifyModal',
      'onDelete',
      'onComfirmModifyModal',
      'onCloseModifyModal',
      'onDeleteStore',
      'exportCellularAndStoreInfo',
    ].reduce(
      (prev, curr) => ({
        ...prev,
        [curr](e) {
          this.store[curr](e);
        },
      }),
      {},
    ),
  },
  computed: {
    ...[
      'formQueryValue',
      'list',
      'exporting',
      'querying',
      'visible',
      'importVisible',
      'importCompeteVisible',
      'isModifyInfoVisible',
      'cellularRowData',
      'exportLoading',
      'cityList',
    ].reduce(
      (prev, curr) => ({
        ...prev,
        [curr]: {
          get() {
            if (curr === 'list') {
              const { data = [], ...restParams } = this.store[curr][LIST_NAME];
              this.store.querying = this.store[curr][LIST_NAME].loading;
              return {
                ...restParams,
                data: data.map(item => ({
                  ...item,
                  createTime: formatDate(new Date(item.createTime), 'yyyy-MM-dd hh:mm:ss'),
                  topChannelCode: TOP_CHANNELS.find(i => i.id === item.topChannelCode)?.name,
                  marketRate: item.marketRate ? Number(item.marketRate * 100).toFixed(3) + '%' : '-',
                })),
              };
            }
            return this.store[curr];
          },
        },
      }),
      {},
    ),
  },
  async created() {},
  async mounted() {
    this.store.loadRegionCitys();
    this.store.init();
  },
};
